<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/product.css">
    <link rel="icon" href="../img/tuxi.jpg">
</head>

<body>
    <!-- 头部 -->
    <div id="hard">
        <div class="typeArea heart clearfix">
            <div class="mark">realme.com</div>
            <div class="greet">欢迎光临，&emsp;请 <a href="#">登陆\<span>注册</span></a></div>
        </div>
    </div>
    <!-- 主体1 -->
    <dl class="body1 heart">
        <dt>
            <i>产品一</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer1">
                <!--  -->
                <div class="small_box">
                    <img src="../img/1598877078593.jpg" alt="汪星人">
                    <div class="fdj"></div>
                </div>
                <div class="big_box">
                    <img class="big_img" src="../img/1598877078593.jpg" alt="汪星人">
                </div>
                
                <!--  -->
            </div>
            <div class="riGht riGht1">
                
            </div>
        </dd>
        <dt>
            <i>产品二</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer2"></div>
            <div class="riGht riGht2"></div>
        </dd>
        <dt>
            <i>产品三</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer3"></div>
            <div class="riGht riGht3"></div>
        </dd>
        <dt>
            <i>产品四</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer4"></div>
            <div class="riGht riGht4"></div>
        </dd>
        <dt>
            <i>产品五</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer5"></div>
            <div class="riGht riGht5"></div>
        </dd>
        <dt>
            <i>产品六</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer6"></div>
            <div class="riGht riGht6"></div>
        </dd>
        <dt>
            <i>产品七</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer7"></div>
            <div class="riGht riGht7"></div>
        </dd>
        <dt>
            <i>产品八</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer8"></div>
            <div class="riGht riGht8"></div>
        </dd>
        <dt>
            <i>产品九</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer9"></div>
            <div class="riGht riGht9"></div>
        </dd>
        <dt>
            <i>产品十</i>
            <span>-</span>
        </dt>
        <dd class="item clearfix">
            <div class="queer queer10"></div>
            <div class="riGht riGht10"></div>
        </dd>


    </dl>
 <!-- 导航栏 -->
 <footer>
    <header>
       <a href="../html/index.html">返回首页</a>
    </header>
    <main>
        <a href="../html/details.html">产品列表</a>
    </main>
</footer>


    <!-- yejiao页脚1 -->
    <div id="foot1">
        <div class="heart icon">
            <div class="warp clearfix">
                <div class="beauti beauti1"></div>
                <div class="beauti beauti2 beauti5"></div>
                <div class="beauti beauti3 beauti5"></div>
                <div class="beauti beauti4"></div>
            </div>
        </div>
        <div class="heart litt">
            <div class="warp">
                <ul class="clearfix">
                    <li class="diagonal">支付方式</li>
                    <li class="diagonal">网上支付</li>
                    <li class="diagonal">礼品卡支付</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                    <li class="diagonal">银行转帐</li>
                </ul>
            </div>
            <div class="number">
                <i>r e a l m e</i>
            </div>
        </div>
    </div>
    <script src="../js/product.js"></script>
</body>

</html>